<template>
	<div class="article-edit">
		<el-card class="!border-none" shadow="never">
			<el-page-header :content="$route.meta.title" @back="$router.back()" />
		</el-card>
		<el-card class="mt-4 !border-none" shadow="never">
			<el-form ref="formRef" class="ls-form" :model="formData" label-width="85px" :rules="rules">
				<!-- <el-form ref="formRef" class="ls-form" :model="formData" label-width="85px"> -->
				<div class="xl:flex">
					<div>
						<el-form-item label="采购内容" prop="name">
							<div class="w-80">
								<el-input v-model="formData.name" placeholder="请输入采购内容" type="textarea"
									:autosize="{ minRows: 3, maxRows: 3 }" maxlength="64" show-word-limit clearable />
							</div>
						</el-form-item>
						<!--         <el-form-item label="信息分类" prop="cid">
                            <el-select
                                class="w-80"
                                v-model="formData.cid"
                                placeholder="请选择信息分类"
                                clearable
                            >
                                <el-option
                                    v-for="item in optionsData.article_cate"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                />
                            </el-select>
                        </el-form-item> -->
						<el-form-item label="选择企业" prop="cid">
							<el-select class="w-80" v-model="formData.q_id" placeholder="请选择企业" clearable>
								<el-option v-for="item in qiyexinxi.data" :key="item.id" :label="item.name"
									:value="item.id" />
							</el-select>
						</el-form-item>
						<el-form-item label="交货地" prop="producer">
							<div class="w-80">
								<el-input v-model="formData.producer" placeholder="请输入交货地" />
							</div>
						</el-form-item>
						<el-form-item label="品种规格" prop="specifications">
							<div class="w-80">
								<el-input v-model="formData.specifications" placeholder="请输入品种规格" />
							</div>
						</el-form-item>
						<!--  <el-form-item label="作者" prop="author">
					      <div class="w-80">
					          <el-input v-model="formData.author" placeholder="请输入作者名称" />
					      </div>
					  </el-form-item> -->
						<!--                 <el-form-item label="文章简介" prop="desc">
                            <div class="w-80">
                                <el-input
                                    v-model="formData.desc"
                                    placeholder="请输入文章简介"
                                    type="textarea"
                                    :autosize="{ minRows: 3, maxRows: 6 }"
                                    :maxlength="200"
                                    show-word-limit
                                    clearable
                                />
                            </div>
                        </el-form-item> -->
						<!--   <el-form-item label="摘要" prop="abstract">
                            <div class="w-80">
                                <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 6, maxRows: 6 }"
                                    v-model="formData.abstract"
                                    maxlength="200"
                                    show-word-limit
                                    clearable
                                />
                            </div>
                        </el-form-item> -->
						<el-form-item label="封面" prop="fming">
							<div>
								<div>
									<material-picker v-model="formData.fming" :limit="1" />
								</div>
								<!-- <div class="form-tips">建议尺寸：240*180px</div> -->
							</div>
						</el-form-item>
						<!--       <el-form-item label="作者" prop="author">
                            <div class="w-80">
                                <el-input v-model="formData.author" placeholder="请输入作者名称" />
                            </div>
                        </el-form-item> -->
						<el-form-item label="联系方式" prop="contacts" v-for="(item,index) in formData.contacts"
							:key="index" :rules="ruless">

							<div class="w-80">
								<el-input v-model="item.name" placeholder="请输入联系人" />
							</div>
							<div class="w-80">
								<el-input v-model="item.tel" placeholder="请输入联系人电话" />
							</div>
							<el-button type="danger" @click="delFn(index)">删除</el-button>
						</el-form-item>
						<div class="form-tips">最多添加七个联系人</div>
						<el-button type="primary" @click="addFn">添加联系人</el-button>
						<el-form-item label="排序" prop="sort">
							<div>
								<el-input-number v-model="formData.sort" :min="0" :max="9999" />
								<div class="form-tips">默认为0， 数值越大越排前</div>
							</div>
						</el-form-item>
						<!--  <el-form-item label="初始浏览量" prop="click_virtual">
                            <div>
                                <el-input-number v-model="formData.click_virtual" :min="0" />
                            </div>
                        </el-form-item>
                        <el-form-item label="文章状态" required prop="is_show">
                            <el-radio-group v-model="formData.is_show">
                                <el-radio :label="1">显示</el-radio>
                                <el-radio :label="0">隐藏</el-radio>
                            </el-radio-group>
                        </el-form-item> -->
					</div>
					<div class="xl:ml-20">
						<el-form-item label="文章内容" prop="ycxq">
							<editor v-model="formData.ycxq" :height="667" :width="375" />
						</el-form-item>
					</div>
				</div>
			</el-form>
		</el-card>
		<footer-btns>
			<el-button type="primary" @click="handleSave">保存</el-button>
		</footer-btns>
	</div>
</template>

<script lang="ts" setup name="articleListsEdit">
	import type { FormInstance } from 'element-plus'
	import { useDictOptions } from '@/hooks/useDictOptions'
	import { articleDetail, articleEdit, articleAdd, articleCateAll, qualificationslist } from '@/api/article'
	import useMultipleTabs from '@/hooks/useMultipleTabs'
	import { onMounted } from "vue";


	const route = useRoute()
	const router = useRouter()
	const formData = reactive({
		name: '',
		fming: '',
		producer: '',
		ycxq: '',
		sort: 0,
		specifications: '',
		q_id: null,
		contacts: [{ name: '', tel: null }],
		type:1
	})
	const qiyexinxi = reactive({
		data: []
	})



	const delFn = (index) => {
		formData.contacts.splice(index, 1);
	}

	const { removeTab } = useMultipleTabs()
	const formRef = shallowRef<FormInstance>()
	const rules = reactive({
		name: [{ required: true, message: '请输入采购内容', trigger: 'blur' }],
		eid: [{ required: true, message: '请选择企业', trigger: 'blur' }],
		producer: [{ required: true, message: '请输入产地', trigger: 'blur' }],
		specifications: [{ required: true, message: '请输入规格', trigger: 'blur' }],
		fming: [{ required: true, message: '请选择图片', trigger: 'blur' }],
		ycxq: [{ required: true, message: '请输入内容', trigger: 'blur' }],

	})

	// const ruless = reactive({
	// 	tel: [
	// 		{ required: true, message: '请输入电话号码', trigger: 'blur' }
	// 	],
	// 	name:[{ required: true, message: '请输入采购内容', trigger: 'blur' }]
	// })
	const getDetails = async () => {
		const data = await articleDetail({
			id: route.query.id
		})
		Object.keys(formData).forEach((key) => {
			//@ts-ignore
			formData[key] = data[key]
		})
	}

	const { optionsData } = useDictOptions<{
		article_cate : any[]
	}>({
		article_cate: {
			api: articleCateAll
		}
	})

	const handleSave = async () => {


		// var reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/




		await formRef.value?.validate()

		await articleAdd(formData)

		removeTab()
		router.back()
	}
	onMounted(() => {
		qualificationslist().then(res => {
			//console.log(res.data);
			console.log(res, '111');
			qiyexinxi.data = res.lists
			console.log(qiyexinxi.data, 'qiyexinxi.data');
		})
		// 在这里执行与 onLoad 类似的操作
	});


	const addFn = () => {

		if (formData.contacts.length > 6) {
			return false
		}
		formData.contacts.push({
			name: '',
			tel: null
		})
	}
	route.query.id && getDetails()
</script>